import Link from "next/link";

const navs = [
    {
        label: '关于华为',
        items: [
            {
                label: '公司简介',
                link: '#'
            }, {
                label: '信任中心',
                link: '#'
            }, {
                label: '可持续发展',
                link: '#'
            }, {
                label: '供应商',
                link: '#'
            },
        ]
    }, {
        label: '新闻与活动',
        items: [
            {
                label: '新闻',
                link: '#'
            }, {
                label: '展会活动',
                link: '#'
            }, {
                label: '多媒体',
                link: '#'
            },
        ]
    }, {
        label: '发现华为',
        items: [
            {
                label: '华为技术专栏',
                link: '#'
            },
            {
                label: '跃升数字生产力',
                link: '#'
            },
            {
                label: '智能世界2023报告',
                link: '#'
            },
            {
                label: '华为技术专栏',
                link: '#'
            }
        ]
    }, {
        label: '开发者',
        items: [
            {
                label: 'HarmonyOS',
                link: '#'
            }, {
                label: '开发者大会',
                link: '#'
            }
        ]
    }, {
        label: '技术支持',
        items: [
            {
                label: '华为云',
                link: 'https://huaweicloud.com'
            },
            {
                label: '企业技术支持',
                link: '#'
            }, {
                label: '运营商技术支持',
                link: '#'
            }
        ]
    },
]

export default function BottomNavigations() {
    return (
        <div className={"py-20 bg-[#f5f5f5]"}>
            <div className={"flex flex-wrap gap-4 mx-auto max-w-7xl"}>
                {
                    navs.map((item, index1) =>
                        <div key={index1} className={"w-[240px]"}>
                            <div className={"text-xl font-bold"}>{item.label}</div>
                            <div className={"flex flex-col gap-y-3 mt-8 text-[#606060]"}>
                                {
                                    item.items.map((nav, index2) =>
                                        <Link key={index2} href={nav.link} target={"_blank"}>{nav.label}</Link>
                                    )
                                }
                            </div>
                        </div>
                    )
                }
            </div>
        </div>
    )
}
